<template>
	<view class="mine-page page">
		<view class="steps-block">
			<view class="steps-item">
				<view class="round" :class="tabActive<=4?'active':''">1</view>
				<view class="steps-title" :class="tabActive<=4?'active':''">填写资料</view>
			</view>
			<view class="line"></view>
			<view class="steps-item">
				<view class="round" :class="tabActive!=1?'active':''">2</view>
				<view class="steps-title" :class="tabActive!=1?'active':''">人社局审核</view>
			</view>
			<view class="line"></view>
			<view class="steps-item">
				<view class="round" :class="tabActive==3||tabActive==4?'active':''">3</view>
				<view class="steps-title" :class="tabActive==3||tabActive==4?'active':''">银行审核</view>
			</view>
			<view class="line"></view>
			<view class="steps-item">
				<view class="round" :class="tabActive==4?'active':''">4</view>
				<view class="steps-title" :class="tabActive==4?'active':''">发放补贴</view>
			</view>
		</view>
		<view v-if="tabActive === 1">
			<view class="info-block">
				<view class="info-list">
					<view class="form-title">个人信息</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">姓名</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入姓名" v-model="form.name" placeholder-class="input-placeholder"
								placeholder-style="color:#000;" style="width: 100%;" maxlength="10" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">性别</view>
						</view>
						<view class="form-contents">
							<picker class="form-ctrl" :range="genderOptions" range-key="title" :value="genderIndex"
								@change="bindPicker">
								{{genderOptions[genderIndex]['title']}}
							</picker>
							<view class="iconfont icon-gengduo1 arrow"></view>
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">手机号</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入手机号" v-model="form.phone" placeholder-class="input-placeholder"
								placeholder-style="color:#000;" style="width: 100%;" maxlength="11" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">身份证号</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入身份证号" v-model="form.idCards" placeholder-class="input-placeholder"
								placeholder-style="color:#000;" style="width: 100%;" maxlength="18" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">毕业院校</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入毕业院校" v-model="form.school" placeholder-class="input-placeholder"
								placeholder-style="color:#000;" style="width: 100%;" maxlength="20" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">毕业时间</view>
						</view>
						<picker mode="date" :value="date" :start="startDate" :end="endDate"
							@change="graduationTimeChange">
							<view class="uni-input">{{date?date:"请选择毕业时间"}}</view>
						</picker>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">毕业证</view>
						</view>
						<view class="upload-content">
							<image @click="chooseImage(1)"
								:src="form.graduationUrl?form.graduationUrl:'https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/upload.png'"
								:class="form.graduationUrl?'upload1':'upload'">
							</image>
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">开户行</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入银行开户行" v-model="form.bank" placeholder-class="input-placeholder"
								placeholder-style="color:#000;" style="width: 100%;" maxlength="20" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">银行账号</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入银行账号" v-model="form.bankNum" placeholder-class="input-placeholder"
								placeholder-style="color:#000;" style="width: 100%;" maxlength="19" />
						</view>
					</view>
				</view>
			</view>
			<view class="info-block">
				<view class="info-list">
					<view class="form-title">企业信息</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">企业名称</view>
						</view>
						<view class="form-contents">
							<Combox labelKey="enterpriseName" :value="enterpriseForm.ename" valueKey="id" :candidates="comList" :border="false"
								placeholder="请选择企业" @input="fieldNameChange" @dict="fieldIdChange" style="width: 100%	;"
								@pageBottom="pageBottom"></Combox>
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">纳税人识别号</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入纳税人识别号" :disabled="true"
								v-model="enterpriseForm.taxpayerIdentificationNumber"
								placeholder-class="input-placeholder" placeholder-style="color:#000;"
								style="width: 100%;" maxlength="20" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">所在部门</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入所在部门" v-model="enterpriseForm.department"
								placeholder-class="input-placeholder" placeholder-style="color:#000;"
								style="width: 100%;" maxlength="20" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">岗位名称</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入岗位名称" v-model="enterpriseForm.postName"
								placeholder-class="input-placeholder" placeholder-style="color:#000;"
								style="width: 100%;" maxlength="20" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">企业联系电话</view>
						</view>
						<view class="form-contents">
							<input placeholder="请输入企业联系电话" v-model="enterpriseForm.ephone"
								placeholder-class="input-placeholder" placeholder-style="color:#000;"
								style="width: 100%;" maxlength="12" />
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">是否全勤</view>
						</view>
						<view class="form-contents">
							<picker class="form-ctrl" :range="attendanceOptions" range-key="title"
								:value="attendanceIndex" @change="attendanceBindPicker">
								{{attendanceOptions[attendanceIndex]['title']}}
							</picker>
							<view class="iconfont icon-gengduo1 arrow"></view>
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">在职证明</view>
						</view>
						<view class="upload-content">
							<image @click="chooseImage(2)"
								:src="enterpriseForm.proofOfMployment?enterpriseForm.proofOfMployment:'https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/upload.png'"
								:class="enterpriseForm.proofOfMployment?'upload1':'upload'">
							</image>
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">参保证明</view>
						</view>
						<view class="upload-content">
							<image @click="chooseImage(3)"
								:src="enterpriseForm.proofInsuranceParticipation?enterpriseForm.proofInsuranceParticipation:'https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/upload.png'"
								:class="enterpriseForm.proofInsuranceParticipation?'upload1':'upload'">
							</image>
						</view>
					</view>
					<view class="form-style">
						<view class="name-item">
							<view class="must">*</view>
							<view class="name">考勤明细</view>
						</view>
						<view class="upload-content">
							<image @click="chooseImage(4)"
								:src="enterpriseForm.attendanceEtails?enterpriseForm.attendanceEtails:'https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/upload.png'"
								:class="enterpriseForm.attendanceEtails?'upload1':'upload'">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="tabActive===2">
			<view class="info-block" v-if="subsidyState === 1">
				<view class="info-list"
					style="display: flex;flex-direction: column;align-items: center;padding: 80rpx 30rpx;">
					<image :src="imageUrl+'/home/'+'审核中.png'" class="status-image" />
					<view class="status-name">审核中</view>
					<view class="status-text">
						您的申请已提交人社局，工作人员将在5个工作日内审核，审核结果会以短信方式通知，敬请留意！
					</view>
				</view>
			</view>
			<view class="info-block" v-if="subsidyState === 3">
				<view class="info-list"
					style="display: flex;flex-direction: column;align-items: center;padding: 80rpx 30rpx;">
					<image :src="imageUrl+'/home/'+'未通过.png'" class="status-image" />
					<view class="status-name">未通过</view>
					<view class="status-text" v-if="form.state === 0">
						您的申请未通过，原因：{{form.reason}}
					</view>
					<view class="status-text" v-else-if="enterpriseForm.state === 0">
						您的申请未通过，原因：{{enterpriseForm.reason}}
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="tabActive===3">
			<view class="info-block" v-if="subsidyState === 2">
				<view class="info-list"
					style="display: flex;flex-direction: column;align-items: center;padding: 80rpx 30rpx;">
					<image :src="imageUrl+'/home/'+'审核中.png'" class="status-image" />
					<view class="status-name">审核中</view>
					<view class="status-text">
						人社局审核以通过，已递交至银行审核，工作人员将会在5个工作日内审核，审核结果会以短信方式通知，敬请留意！
					</view>
				</view>
			</view>
			<view class="info-block" v-if="subsidyState === 4">
				<view class="info-list"
					style="display: flex;flex-direction: column;align-items: center;padding: 80rpx 30rpx;">
					<image :src="imageUrl+'/home/'+'未通过.png'" class="status-image" />
					<view class="status-name">未通过</view>
					<view class="status-text">
						您的申请未通过，原因：{{reason}}
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="tabActive==4">
			<view class="info-block">
				<view class="info-list"
					style="display: flex;flex-direction: column;align-items: center;padding: 80rpx 30rpx;">
					<image :src="imageUrl+'/home/'+'通过.png'" class="status-image" />
					<view class="status-name">审核通过</view>
					<view class="status-text">
						银行审核以通过，补贴将在10个工作日内完成发放，敬请留意！
					</view>
				</view>
			</view>
		</view>
		<view class="btn-item">
			<button class="submit-normal" @click="submitForm" v-if="tabActive===1">
				<text style="color: #FFFFFF;">提交</text>
			</button>
			<!-- '/page_other/subsidy/form-fields',{id:subsidyApplicationId,type:3} -->
			<button class="submit-normal" @click="goApply()"
				v-else-if="(tabActive===2 || tabActive===3) && (subsidyState === 3|| subsidyState === 4)">
				<text style="color: #FFFFFF;">重新提交</text>
			</button>
			<button class="submit-normal" @click="goHomePage('/pages/index/index')" v-else>
				<text style="color: #FFFFFF;">返回首页</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		uploadFile
	} from '@/api/file.js'
	import {
		addAndUpdate,
		getOneByUid,
		getDetial,
		getAgainDetial
	} from '@/api/subsidy.js'
	import {
		getEnterpriseAll
	} from '@/api/live.js'
	import {
		getEnterpriseList
	} from '@/api/company.js'
	import Combox from '@/page_other/components/Combox/Combox';
	export default {
		components: {
			Combox
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				subsidyState: 0,
				reason: '',
				comList: [],
				date: null,
				tabActive: 1,
				subsidyApplicationId: 0,
				subsidyApplicationDetailId: 0,
				form: {
					id: null,
					name: '',
					sex: 1,
					phone: '',
					idCards: '',
					school: '',
					graduationTime: '',
					graduationUrl: '',
					bankNum: '',
					bank: '',
					state: null,
					reason: ''
				},
				enterpriseForm: {
					id: null,
					ename: '',
					eid: null,
					taxpayerIdentificationNumber: '',
					department: '',
					postName: '',
					ephone: '',
					fullAttendance: 1,
					proofOfMployment: '',
					proofInsuranceParticipation: '',
					attendanceEtails: '',
					state: null,
					reason: ''
				},
				rules: {
					name: {
						name: '姓名',
						required: true
					},
					sex: {
						name: '性别',
						required: true
					},
					phone: {
						name: '手机号',
						required: true
					},
					idCards: {
						name: '身份证号',
						required: true
					},
					school: {
						name: '毕业院校',
						required: true
					},
					graduationTime: {
						name: '毕业时间',
						required: true
					},
					graduationUrl: {
						name: '毕业证',
						required: true
					},
					bankNum: {
						name: '银行账号',
						required: true
					},
					bank: {
						name: '开户行',
						required: true
					},
					ename: {
						name: '企业名称',
						required: true
					},
					taxpayerIdentificationNumber: {
						name: '纳税人识别号',
						required: true
					},
					department: {
						name: '所在部门',
						required: true
					},
					postName: {
						name: '岗位名称',
						required: true
					},
					ephone: {
						name: '企业联系电话',
						required: true
					},
					fullAttendance: {
						name: '是否全勤',
						required: true
					},
					proofOfMployment: {
						name: '在职证明',
						required: true
					},
					proofInsuranceParticipation: {
						name: '参保证明',
						required: true
					},
					attendanceEtails: {
						name: '考勤明细',
						required: true
					},
				},
				attendanceOptions: [{
						id: 0,
						title: "否"
					},
					{
						id: 1,
						title: "是"
					}
				],
				genderOptions: [{
						id: 1,
						title: "男"
					},
					{
						id: 0,
						title: "女"
					}
				],
				attendanceIndex: 0,
				genderIndex: 0,
				displayChoose: false,
				requestUrl: '',
				imageUrl: '',
				comListConf: {
					loading: false,
					searchComName: '',
					total: 0,
					comPage: 1,
				},
				dataToSend: {
					subsidyApplicationId: null,
					subsidyApplicationDetailId: null,
					personalInformationModel: {},
					enterpriseInformationModel: {}

				}
			}
		},
		onLoad() {
			this.requestUrl = this.globalConfig.requestUrl;
			this.imageUrl = this.globalConfig.imageUrl;
			this.getUserInfo();
			// 从eventChannel接收参数
			const eventChannel = this.getOpenerEventChannel();
			// 使用 setTimeout 延迟监听事件
			setTimeout(() => {
				eventChannel.on('acceptDataFromOpenerPage', (data) => {
					this.subsidyApplicationId = data.id; // 确保传递的参数是对象中的 id
					if (data.type === 2) {
						this.getUserDetial()
					} else
					if (data.type === 3) {
						this.getAgainUserDetial()
					}
				});
			}, 0);
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindPicker(e) {
				this.genderIndex = e.detail.value
				this.form.sex = genderOptions[e.detail.value].id
			},
			attendanceBindPicker(e) {
				this.attendanceIndex = e.detail.value
				this.enterpriseForm.fullAttendance = attendanceOptions[e.detail.value].id
			},
			validatePhone() {
				const phoneRegex = /^1[3-9]\d{9}$/;
				return phoneRegex.test(this.form.phone);
			},
			submitForm() {
				if (!this.validatePhone()) {
					this.showToast('请填写正确的手机号')
					return;
				}
				if (validate(this.form, this.rules) && validate(this.enterpriseForm, this.rules)) {
					this.dataToSend.subsidyApplicationId = this.subsidyApplicationId;
					this.dataToSend.subsidyApplicationDetailId = this.subsidyApplicationDetailId;
					this.dataToSend.personalInformationModel = JSON.stringify(this.form);
					this.dataToSend.enterpriseInformationModel = JSON.stringify(this.enterpriseForm)
					addAndUpdate(this.dataToSend).then((res) => {
						uni.hideLoading()
						this.showToast('保存成功', function() {})
						this.getUserDetial()
					}).catch((res) => {
						uni.hideLoading()
					})
				}
			},
			getUserInfo() {
				getOneByUid().then((res) => {
					if (res) {
						this.form = res
						this.date = this.form.graduationTime
					}
				}).catch((res) => {
					uni.hideLoading()
				})
			},
			getUserDetial() {
				getDetial({
					subsidyApplicationId: this.subsidyApplicationId
				}).then((res) => {
					this.subsidyState = res.subsidyState
					this.reason = res.reason
					if (res) {
						if (res.subsidyState === 1 || res.subsidyState === 3) {
							this.tabActive = 2
						} else
						if (res.subsidyState === 2 || res.subsidyState === 4) {
							this.tabActive = 3
						} else
						if (res.subsidyState === 5) {
							this.tabActive = 4
						}
						this.form = res.personalInformationModel
						this.enterpriseForm = res.enterpriseInformationModel
					}
				}).catch((res) => {
					uni.hideLoading()
				})
			},
			getAgainUserDetial() {
				getDetial({
					subsidyApplicationId: this.subsidyApplicationId
				}).then((res) => {
					this.subsidyApplicationDetailId = res.id
					this.again()
				}).catch((res) => {
					uni.hideLoading()
				})

			},
			again() {
				getAgainDetial({
					subsidyApplicationDetailId: this.subsidyApplicationDetailId
				}).then((res) => {
					this.form = res.personalInformationModel
					this.date = this.form.graduationTime
					this.enterpriseForm = res.enterpriseInformationModel

				}).catch((res) => {
					uni.hideLoading()
				})
			},
			graduationTimeChange(e) {
				this.date = e.detail.value
				this.form.graduationTime = this.date
			},
			goApply() {
				this.tabActive = 1;
				this.$forceUpdate();
				this.getAgainUserDetial();
				// uni.navigateTo({
				// 	url,
				// 	success: function(res) {
				// 		// 将参数传递给目标页面
				// 		res.eventChannel.emit('acceptDataFromOpenerPage', params);
				// 	}
				// })
			},
			goHomePage(url) {
				uni.navigateTo({
					url
				})
			},
			goBackIndex(url = '/page_other/subsidy/index') {
				uni.navigateTo({
					url
				})
			},
			chooseImage(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (e) => {
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						uploadFile(e.tempFilePaths[0]).then((res) => {
							const data = JSON.parse(res.data);
							if (data.code == 200) {
								uni.hideLoading()
								this.showToast('上传成功')
								if (type == 1) {
									this.form.graduationUrl = this.requestUrl + data.data
								} else if (type == 2) {
									this.enterpriseForm.proofOfMployment = this.requestUrl + data.data
								} else if (type == 3) {
									this.enterpriseForm.proofInsuranceParticipation = this.requestUrl +
										data.data
								} else {
									this.enterpriseForm.attendanceEtails = this.requestUrl + data.data
								}
							} else {
								uni.hideLoading()
								this.showToast(data.msg)
							}
						}).catch((res) => {
							uni.hideLoading()
							this.showToast('上传失败');
						})
					}
				})
			},
			fieldNameChange(e) {
				this.comListConf.searchComName = e;
				this.enterpriseForm.ename = e;
				this.comListConf.page = 1;
				this.getEnterprise();
			},
			fieldIdChange(e) {
				this.enterpriseForm.eid = e;
				for (var i = 0; i < this.comList.length; i++) {
					if (e == this.comList[i].id) {
						this.enterpriseForm.taxpayerIdentificationNumber = this.comList[i].erterpriseIdNum
					}
				}
			},
			pageBottom() {
				if (this.comListConf.page * 100 < this.comListConf.total) {
					this.comListConf.page++;
					this.getEnterprise()
				}
			},
			getEnterprise() {
				if (this.comListConf.loading) return;
				this.comListConf.loading = true;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getEnterpriseList({
					comName: this.comListConf.searchComName,
					page: this.comListConf.page,
					limit: 100
				}).then((res) => {
					this.comList = res.list ?? [];
					this.comListConf.total = res.count;
				}).finally(() => {
					this.loading = false;
					this.comListConf.loading = false;
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

		},
		onShow() {},
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		overflow: hidden;
		background-color: #F7F6F9;

		.steps-block {
			width: calc(100% - 60rpx);
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin: 30rpx auto;
			margin-bottom: 0;
			display: flex;
			justify-content: space-between;

			.steps-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.round {
					background: #d8d8d8;
					color: #fff;
					border-radius: 50%;
					width: 45rpx;
					height: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.round.active {
					background: #0256ff;
				}

				.steps-title {
					color: #d8d8d8;
					font-size: 30rpx;
					margin-top: 20rpx;
				}

				.steps-title.active {
					color: #0256ff;
				}
			}

			.line {
				width: 30rpx;
				height: 1rpx;
				background-color: #d8d8d8;
				margin-top: 30rpx;
			}
		}

		.info-block {
			padding: 30rpx;

			.info-list {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;


				.form-title {
					font-family: FZHanZhenGuangBiaoS-GB;
					font-size: 16px;
					font-weight: bold;
					line-height: 50px;
					display: flex;
					align-items: center;
					letter-spacing: 0em;

					/* 主色 */
					color: #0256ff;
				}

				.form-style {
					display: flex;
					flex-direction: column;
					border-bottom: 1px solid #F7F7F7;
					padding-bottom: 30rpx;
					margin-top: 30rpx;

					.upload-content {
						position: relative;
						background: #fafafa;
						border-radius: 5px;
						width: 200rpx;
						height: 200rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 20rpx;

						.title {
							position: absolute;
							top: 50%;
							left: 50%;
						}

						.upload {
							width: 90rpx;
							height: 90rpx;
						}

						.upload1 {
							width: 100%;
							height: 100%;
						}
					}

					.name-item {
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;

						.must {
							color: #EA0000;
						}

						.name {
							font-size: 30rpx;
						}
					}

					.form-contents {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;

						.inputPlaceholder {
							color: #999;
							font-weight: normal;
						}


						.form-crl {
							width: calc(100% - 80rpx);
							font-size: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.right {
							display: flex;
							align-items: center;

							.iconfont {
								color: #CDCDCD;
								font-size: 32rpx;
							}
						}
					}
				}

				.status-image {
					width: 70px;
					height: 70px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.status-name {
					font-size: 34rpx;
					color: #0256ff;
					font-weight: bold;
					margin-top: 30rpx;
					margin-bottom: 30rpx;
				}

				.status-text {
					display: flex;
					justify-content: center;
					width: 80%;
					font-size: 30rpx;
					line-height: 55rpx;
				}
			}


		}

		.btn-item {
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
		}

		.submit-normal {
			width: 288px;
			height: 50px;
			border-radius: 50px;
			opacity: 1;
			background: #0256ff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
		}

	}
</style>